<template>
<!-- 关联视频分析8 43 -->
  <div id='tik_tok'
       v-infinite-scroll="loadMore"
       infinite-scroll-disabled="busy"
       infinite-scroll-distance="0"
       infinite-scroll-immediate-check="false">
    <template v-if="vipRootObj[8][43].owner">
      <p class="title mt_40"><img src="@/assets/meng/tik_tok01.png"><span>视频分类</span></p>
      <radio_group v-if="$store.state.classify_options.length!=0"
                   :radio_values="$store.state.classify_options[0]"
                   v-model="value01"
                   title="分类"
                   class="mb_10 mt_30" />
      <section class="s1">
        <p>发布时间</p>
        <el-date-picker v-model="value02"
                        class="mr_30 long_time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        value-format="yyyy-MM-dd"
                        prefix-icon="el-icon-arrow-down"
                        unlink-panels
                        :clearable="false"
                        :picker-options="pickerOptions"
                        :default-value="[timestamp((new Date().getTime() - 2626560000) / 1000,'Y-M-D'),timestamp(new Date().getTime()/ 1000,'Y-M-D')]">
        </el-date-picker>
        <multi_select v-model="value03"
                      :options="['屏蔽已删除视频']" />
      </section>
      <section class="s2 mt_20">
        <radio_group01 :radio_values="['最新', '点赞']"
                       v-model="value04" />
        <section class="input_group ml_30">
          <input type="text"
                 v-model="input01"
                 placeholder="请输入关键词在结果中搜索"
                 @keyup.enter="search_input()">
          <div @click="search_input()"><img src="../../../assets/meng/search01.png"></div>
        </section>
      </section>
      <table class="table mt_30"
             ref="capture">
        <thead>
          <tr>
            <th>视频内容</th>
            <th>达人</th>
            <th>点赞数</th>
            <th>评论数</th>
            <th>较前日点赞数增量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in table_data01"
              :key="'table' + index">
            <td class="td02">
              <div>
                <section>
                  <img :src="item.thum_pic"
                       v-if="!item.is_delete">
                  <img src="@/assets/meng/hot_video17.png"
                       v-else>
                  <a :href="item.url"
                     target="_blank"><img src="@/assets/meng/hot_video18.png"></a>
                </section>
                <section>
                  <p class="dot"><button v-if="item.is_delete"
                            class="del_btn">已删除或隐藏</button>
                    <el-tooltip class="item"
                                effect="light"
                                :content="item.title"
                                :hide-after="2000"
                                placement="top"
                                popper-class="mytooltip">
                      <span class="pointer"
                            @click="dialog=true;active_name01='0';video_id=item.aweme_id;">{{item.title}}</span>
                    </el-tooltip>
                  </p>
                  <p>
                    <span>热词：</span>
                    <button :class="{is_del:item.is_delete}"
                            v-for="(item_son,index_son) in item.hotword.slice(0,3)"
                            :key="index_son+'key'">{{item_son.name}}</button>
                    <span v-if="!item.hotword.length">--</span>
                  </p>
                  <p>
                    <span>时长：</span>
                    <span :class="{is_del:item.is_delete}">{{format_time(item.duration)}}</span>
                  </p>
                  <p>
                    <span>发布时间：</span>
                    <span :class="{is_del:item.is_delete}">{{timestamp(item.release_time, 'Y年M月D日')}}</span>
                  </p>
                </section>
              </div>
            </td>
            <td class="td03">
              <p class="dot">{{item.nickname}}</p>
            </td>

            <td class="td05">
              <img src="@/assets/meng/l.png">
              <span>{{format_num(item.favorite_count)}}</span>
            </td>
            <td class="td06">
              <img src="@/assets/meng/c.png">
              <span>{{format_num(item.comment_count)}}</span>
            </td>
            <td class="td07">
              <span>{{format_num(item.share_count)}}</span>
            </td>
            <td class="td08">
              <div>
                <el-tooltip effect="light"
                            :hide-after="2000"
                            content="视频详情"
                            placement="top"
                            popper-class="mytooltip">
                  <img src="@/assets/meng/hot_video01.png"
                       @click="dialog=true;active_name01='0';video_id=item.aweme_id;">
                </el-tooltip>
                <el-tooltip effect="light"
                            :hide-after="2000"
                            content="观众分析"
                            placement="top"
                            popper-class="mytooltip">
                  <img src="@/assets/meng/hot_video02.png"
                       @click="dialog=true;active_name01='1';video_id=item.aweme_id;">
                </el-tooltip>
                <el-tooltip effect="light"
                            :hide-after="2000"
                            content="播放"
                            placement="top"
                            popper-class="mytooltip">
                  <a :href="item.url"
                     target="_blank"><img src="@/assets/meng/hot_video03.png"></a>
                </el-tooltip>
                <el-tooltip effect="light"
                            :hide-after="2000"
                            content="收藏"
                            placement="top"
                            popper-class="mytooltip">
                  <img v-if="!item.is_collec"
                       src="@/assets/meng/hot_video04.png"
                       @click="add_star(1,item,index)">
                </el-tooltip>
                <el-tooltip effect="light"
                            :hide-after="2000"
                            content="取消收藏"
                            placement="top"
                            popper-class="mytooltip">
                  <img v-if="item.is_collec"
                       src="@/assets/meng/hot_video05.png"
                       @click="add_star(0,item,index)">
                </el-tooltip>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div v-loading="loading"
           v-if="!(table_data01.length<(page01-1)*50)"
           class="loading"
           element-loading-text="拼命加载中..."
           element-loading-spinner="el-icon-loading"></div>
      <p class="nothing"
         v-show="table_data01.length!=0&&table_data01.length<(page01-1)*50">我是有底线的～</p>
      <div class="empty"
           v-show="!loading&&table_data01.length==0">
         <img src="@/assets/liu/zw.png" />
      <p>暂无数据</p>
      </div>
      <pop v-if="dialog"
           v-model="dialog"
           :id="video_id"
           :index="active_name01" />
    </template>
    <!-- 优化后的示例图 -->
    <div v-else class="notVipBoxNewWl">
      <img :src="$global.staticUrl + 'image/egImg/tik_tok.jpg'" class="egBgImg" />
      <el-dialog
        :visible="true"
        :modal-append-to-body="false"
        :lock-scroll="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="false"
        :show-close="false"
        custom-class="detailsDialog"
      >
        <div class="dialogEg">
          <payVip routerName="tik_tok" :lowestVipNum="vipRootObj[8][43].ownerMinLevel" />
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import pop from '@/pages/meng/video/pop'
export default {
  name: 'tik_tok',
  components: { pop },
  data() {
    return {
      permissions: 1,
      dialog: false,
      video_id: '',
      active_name01: '1',
      //   以上是弹出窗
      pickerOptions: {
        disabledDate(time) {
          let temp = new Date()
          temp.setTime(temp.getTime() - 24 * 60 * 60 * 1000 * 89)
          return time.getTime() > Date.now() || temp.getTime() > time.getTime()
        },
      },
      busy: false,
      loading: true,
      table_data01: [],
      page01: 1,
      cancel01: null,
      input01: '',
      value01: '全部',
      value02: [],
      value03: '',
      value04: '最新',
      vipRootObj: this.$store.state.userRoot,  //会员权限对象
    }
  },
  props: ['id'],
  computed: {
    listen_change() {
      const { input01, value01, value02, value03, value04 } = this
      return {
        input01,
        value01,
        value02,
        value03,
        value04,
      }
    },
  },
  created() {
    this.value02[1] = this.timestamp(Date.now() / 1000, 'Y-M-D')
    this.value02[0] = this.timestamp(Date.now() / 1000 - 86400 * 7, 'Y-M-D')
    if(this.vipRootObj[8][43].owner){
      this.get_data()
      this.$watch(
        'listen_change',
        this.debounce((newValue, oldValue) => {
          this.page01 = 1
          this.table_data01 = []
          this.get_data()
        }, 0)
      )
    }
  },
  mounted() {},
  methods: {
    // 收藏
    add_star(flag, item, index) {
      let that = this
      if (flag) {
        this.$axios
          .post('/api/collection/InsertCollection', {
            CollectId: item.aweme_id,
            Module: 2, //模块 1达人 2视频 3音乐 4话题 5商品
          })
          .then((res) => {
            if (res.data.code == 0) {
              this.$set(this.table_data01[index], 'is_collec', 1)
              this.$message({
                message: '收藏成功！',
                type: 'success',
                duration: 2000,
                // offset: '400',
              })
            } else {
              this.$message({
                message: '收藏失败！',
                type: 'error',
                duration: 2000,
                // offset: '400',
              })
            }
          })
          .catch((err) => {
            console.log(err)
          })
      } else {
        this.$axios
          .post('/api/collection/CancelCollection', {
            CollectId: item.aweme_id,
            Module: 2, //模块 1达人 2视频 3音乐 4话题 5商品
          })
          .then((res) => {
            if (res.data.code == 0) {
              this.$set(this.table_data01[index], 'is_collec', 0)
              this.$message({
                message: '取消收藏成功！',
                type: 'success',
                duration: 2000,
                // offset: '400',
              })
            } else {
              this.$message({
                message: '取消收藏失败！',
                type: 'error',
                duration: 2000,
                // offset: '400',
              })
            }
          })
          .catch((err) => {
            console.log(err)
          })
      }
    },
    search_input() {
      this.page01 = 1
      this.table_data01 = []
      this.get_data()
    },
    get_data() {
      let that = this
      this.loading = true
      this.busy = true
      let category
      this.$store.state.classify_options[0].map((item, index) => {
        if (item == this.value01) {
          category = this.$store.state.classify_options[1][index]
        }
      })
      this.$axios
        .post(
          '/api/product/SearchProAweme',
          {
            keyword: this.trimStr(that.input01),
            category: category,
            star_time: that.value02[0],
            end_time: that.value02[1],
            is_del: that.value03 != '' ? 1 : 0,
            pro_id: that.id,
            // pro_id: 20947783179,
            size: 50,
            page: that.page01,
            order_by: 'desc',
            sort: that.value04 == '点赞' ? 'favoriteCount' : 'releasetime',
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01) that.cancel01()
              that.cancel01 = c
            }),
          }
        )
        .then((response) => {
          this.loading = false
          if (response.data.code == 1003) {
            this.permissions = 0
          }
          if (response.data.code == 0) {
            // console.log(response.data.data)
            this.page01 += 1
            this.table_data01 = this.table_data01.concat(response.data.data)
            response.data.data.length < 50
              ? (this.busy = true)
              : (this.busy = false)
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    loadMore: function () {
      this.get_data()
    },
  },
}
</script>
<style scoped lang='less'>
table {
  overflow-x: auto;
  thead {
    tr {
      > th:nth-child(1) {
        width: 490px;
      }
      > th:nth-child(2) {
        width: 120px;
      }
      > th:nth-child(3) {
        min-width: 80px;
      }
      > th:nth-child(4) {
        min-width: 80px;
      }
      img {
        width: 5px;
        height: 10px;
        vertical-align: 0;
        margin-right: 2px;
        cursor: pointer;
      }
    }
  }
  tbody {
    tr {
      .td08 {
        > div {
          margin: 0 auto;
          max-width: 185px;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: space-between;
          a {
            outline: none;
          }
          > img:last-child {
            margin-bottom: 0;
          }
          img {
            cursor: pointer;
            width: 32px;
            height: 32px;
            margin-bottom: 5px;
          }
        }
      }
      .td05,
      .td06,
      .td07 {
        font-family: DINAlternate-Bold;
        img {
          width: 16px;
          margin-right: 3px;
          vertical-align: -2px;
        }
      }
      .td03 {
        > p {
          display: block;
          max-width: 120px;
          font-size: 14px;
          color: #222222;
          margin: 0 auto;
        }
      }
      .td02 {
        padding-left: 20px;
        text-align: left;
        > div {
          display: flex;
          align-items: center;
          > section:nth-child(2) {
            height: 116px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            > p:nth-child(1) {
              .del_btn {
                width: 100px;
                height: 26px;
                background-color: #f5f5f5;
                border-radius: 4px;
                border: solid 1px #e5e5e5;
                text-align: center;
                font-size: 14px;
                color: #888888;
                line-height: 22px;
                margin-right: 10px;
                vertical-align: 1px;
              }
              display: block;
              max-width: 320px;
              font-size: 16px;
              color: #222222;
            }
            > p:nth-child(2) {
              > span:nth-child(2) {
                font-size: 14px;
                color: #222222;
              }
              > span:nth-child(1) {
                font-size: 14px;
                color: #888888;
              }
              .is_del {
                color: #888888 !important;
                border: solid 1px #e5e5e5 !important;
              }
              > button:nth-child(2) {
                margin-left: 0;
              }
              > button {
                padding: 3px 9px;
                background-color: #f5f9ff;
                padding-top: 2px;
                font-size: 14px;
                color: #1779ff;
                text-align: center;
                border-radius: 17px;
                border: solid 1px #1779ff;
                margin-left: 10px;
                margin-bottom: 5px;
              }
            }

            > p:nth-child(3),
            > p:nth-child(4) {
              > span:first-child {
                font-size: 14px;
                color: #888888;
              }
              > span:last-child {
                font-size: 16px;
                font-family: DINAlternate-Bold;
                color: #222222;
              }
              .is_del {
                color: #888888 !important;
              }
            }
          }
          > section:nth-child(1):hover {
            > a {
              display: block !important;
            }
          }
          > section:nth-child(1) {
            margin-right: 22px;
            position: relative;
            > img {
              //   border: 1px solid #e6e6e6;
              width: 80px;
              height: 116px;
              border-radius: 4px;
            }
            > a {
              position: absolute;
              top: 50%;
              cursor: pointer;
              left: 50%;
              transform: translate(-50%, -50%);
              display: none;
            }
          }
        }
      }
      td {
        height: 176px;
        text-align: center;
      }
    }
  }
}
.s2 {
  display: flex;
  align-items: center;
}
.input_group {
  display: inline-block;
  position: relative;
  width: 308px;
  height: 32px;
  border-radius: 4px 4px 4px 4px;
  border: solid 1px #e5e5e5;
  box-sizing: border-box;
  input {
    width: 100%;
    font-size: 14px;
    vertical-align: -1px;
    background-color: #f5f5f5;
    height: 100%;
    box-sizing: border-box;
    padding-left: 11px;
    padding-right: 38px;
    border: none;
  }
  > div {
    position: absolute;
    right: 0;
    cursor: pointer;
    top: -1px;
    text-align: center;
    width: 38px;
    height: 32px;
    background-color: #1779ff;
    border-radius: 0px 4px 4px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 15px;
    }
  }
}
.s1 {
  display: flex;
  align-items: center;
  > p:nth-child(1) {
    font-size: 14px;
    color: #888888;
    margin-right: 16px;
  }
}
.title {
  img {
    width: 16px;
    vertical-align: -2px;
    margin-right: 9px;
  }
  span {
    font-size: 16px;
    color: #222222;
    font-weight: 600;
  }
}
#tik_tok {
}
</style>